<template>
    <div class="">
        <h4 class="margin_bottom20">页面元素列表</h4>
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
                <el-button type="primary" size="small" @click="back"><i class="iconfont icon-plus"></i>返回页面列表</el-button>
                <el-button type="primary" size="small" @click="addPage"><i class="iconfont icon-plus"></i>新增</el-button>
                <el-button type="primary" size="small" @click="deleteRow" icon="delete">删除</el-button>
            </el-col>
            <el-col :span="6">
            <el-input placeholder="搜索..." size="small" v-model="searchKey"><el-button slot="append" icon="search" @click="loadData"></el-button></el-input>
            </el-col>
        </el-row>
        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column header-align="center" type="selection" width="45"> </el-table-column>
                <el-table-column header-align="center" prop="pageName" label="所在页面" width="200"></el-table-column>
                <el-table-column header-align="center" prop="elementInnerName" label="唯一标识" width="200"></el-table-column>
                <el-table-column header-align="center" prop="caption" label="元素名称" width="200"></el-table-column>
                <el-table-column header-align="center" prop="description" label="描述" width="300"></el-table-column>
                <el-table-column header-align="center" prop="displayOrder" label="显示顺序" width="100"></el-table-column>
                <el-table-column header-align="center" label="操作" >
                    <template scope="scope">
                        <el-button @click="edit(tableData[scope.$index])" type="text" size="small">编辑</el-button>
                        <el-button @click.native.prevent="deleteRow(tableData[scope.$index].id)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    
        <!-- 表单弹窗 -->
        <el-dialog title="添加页面元素" v-model="dialogFormVisible">
            <el-form :model="element" ref="form" label-position="right" label-width="80px">
    
                <el-form-item label="唯一标识" prop="elementInnerName" :rules="[{ required: true, message: '唯一标识不能为空'}]">
                    <el-input v-model="element.elementInnerName" placeholder="唯一标识" size="small" style="width:400px;"></el-input>
                </el-form-item>
                <el-form-item label="元素名称" prop="caption">
                    <el-input v-model="element.caption" placeholder="元素名称" size="small" style="width:400px;"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="caption">
                    <el-input type="textarea" v-model="element.description"></el-input>
                </el-form-item>

                <el-form-item label="显示顺序" prop="displayOrder" :rules="[{ required: true, message: '显示顺序不能为空'}]">
                    <el-input v-model="element.displayOrder" placeholder="显示顺序" size="small" style="width:50px;"></el-input>
                </el-form-item>
    
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'page',
    data() {
        return {
            tableData: [],
            currentPage: 1,
            total: 0,
            limit: 20,
            searchKey: '',
            loading: false,
            element: {
                id: '',
                pageId: '',
                pageInnerName: '',
                elementInnerName: '',
                caption: '',
                description: '',
                displayOrder: 0
            },
            dialogFormVisible: false,
            formLabelWidth: '120px',
            pageId: ''
        }
    },
    methods: {

        //点击左侧的菜单树的时候进行查询本菜单数据以及修改显示右侧的儿子级所有菜单
        currentChange(currentRow, oldCurrentRow) {
            console.log(currentRow);
            this.selectedMoudle =currentRow;
            this.loadData();
        },

        //添加子菜单，弹出dialog
        addPage() {
            this.initEntity();

            
            this.dialogFormVisible = true;

        },

        //添加子菜单的保存方法
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var vm = this;
                    this.$http.post(API.rootPath + "/elements", this.element, { emulateJSON: false }).then((response) => {

                        if (response.body.status == 0) {
                            this.$message({
                                message: '保存成功',
                                type: 'success',
                                customClass: 'messageDIY'
                            });

                            //重置表单，其实就是将表单的内容设置为空
                            this.$refs['form'].resetFields();

                            this.dialogFormVisible = false;
                            this.loadData();
                        }
                    });
                } else {
                    return false;
                }
            })
        },

        edit(page) {
            //将选中的某行的codeTable赋值给codeTable
            this.element = page;

            //打开新增和编辑的窗口
            this.dialogFormVisible = true;
        },

        deleteRow(id) {
            this.$confirm('确定删除此元素项?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.$http.delete(API.rootPath + "/elements/" + id).then((response) => {

                    //返回值是0的时候表示成功,重新加载数据
                    if (response.body.status == 0) {
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            customClass: 'messageDIY'
                        });
                        this.loadData();
                    }
                }, (response) => {
                    // error callback
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        loadData() {
            this.loading = true;
            this.$http.get(API.rootPath + "/pages/" + this.pageId + "/elements", {params:{offset: this.limit*(this.currentPage - 1), limit: this.limit, searchKey: this.searchKey}}).then((response) => {

                this.tableData = response.body.data.rows;
                this.total = response.body.data.total;

                this.loading = false;
            }, (response) => {
                // error callback
            }); 
        },

        initEntity() {
            this.element = {
                id: '',
                pageId: '',
                pageInnerName: '',
                elementInnerName: '',
                caption: '',
                description: '',
                displayOrder: 0
            } 
            this.element.pageId = this.$route.params.id;
            this.element.pageInnerName = this.$route.params.pageInnerName;
        },
        back() {
            this.$router.go(-1);
        }
    },
    created() {

        this.pageId = this.$route.params.id;
        this.loadData();
    }
};
</script>

